<template>
  <div class="activity-search-wrap">
    <div class="search-header-wrap">
      <div class="search-wrap">
        <i class="icon-search"></i>
        <input
          v-model="keyword"
          @blur="handleBlur"
          placeholder="请输入品牌活动名称"
        />
      </div>
      <div class="btn-search" @click="handleSearch">搜索</div>
    </div>
    <div class="search-result">
      <activity-list @onAddPrice="handleAddPrice" :list="[1, 2, 3, 4]" />
    </div>
    <add-price-popup ref="addPricePopup" activityId="123" />
  </div>
</template>

<script>
import activityList from './component/activityList.vue';
import addPricePopup from './component/addPricePopup.vue';

export default {
  name: 'shopAddPriceActivitySearch',
  components: { activityList, addPricePopup },
  data() {
    return {
      keyword: ''
    };
  },
  methods: {
    handleBlur() {
      window.scrollTo(0, 0);
    },
    handleSearch() {},
    handleAddPrice() {
      this.$refs.addPricePopup.showDialog();
    },
    fetchData() {}
  }
};
</script>

<style lang="scss" scoped>
.activity-search-wrap {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
  padding-top: 1.28rem;
  .search-header-wrap {
    height: 1.28rem;
    background: #ededed;
    padding: 0.32rem;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    .search-wrap {
      width: 6.06rem;
      height: 0.64rem;
      background: #fff;
      border-radius: 0.32rem;
      padding: 0 0.26rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      i {
        display: inline-block;
        width: 0.3rem;
        height: 0.28rem;
        background: url('../../assets/addPrice/icon-search.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 0.08rem;
      }

      input {
        font-size: 0.26rem;
        display: flex;
        align-items: center;
        line-height: normal;
        color: #333;
        caret-color: #e62525;
        &::-webkit-input-placeholder {
          color: #ccc;
        }
      }
    }
    .btn-search {
      padding-left: 0.24rem;
      color: #333333;
      line-height: normal;
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      font-family: PingFangTC-Regular, PingFangTC;
    }
  }

  .search-result {
  }
}
</style>
